//@ts-nocheck
import React, { Component } from './react';
import ReactDOM from 'react-dom';

class Child extends Component {
  render() {
    console.log('children', this.props.children);

    /** case1*/
    /*const mappedChildren = React.Children.map(this.props.children, (item, index) => [<div
      key={`div${index}A`}>{item}</div>, <div key={`div${index}B`}>{item}</div>]);

    console.log('mappedChildren', mappedChildren);*/

    /** case2*/
    /** React.Children.map和普通map的区别在于会把原来的children打平成一级(如果映射函数映射成了多级,也会被打平成一级)*/
    //→ children.flat(Infinity).map(mapFunction).flat(Infinity)
    /*const mappedChildren = React.Children.map(
      this.props.children, /!** ←可以是一个对象 也可以是一个数组,比直接使用.map更强大*!/
      function (item, index) {
        //this.name
        return [item, [item, [item, [item]]]];
      },
      {name: '我是上下文对象'}
    );
    console.log('mappedChildren', mappedChildren);*/


    /** case3*/
    const mappedChildren = React.Children.map(
      this.props.children,
      function (item, index) {
        //this.name
        return [item, [item, [item, [item]]]];
      }
    );
    console.log('mappedChildren', mappedChildren);

    return <div>{mappedChildren}</div>;
  }
}
class App extends Component {
  render() {
    return (
      <Child>
        {/** case1*/}
        {/*<div>child1</div>
        <div key="key2">child2</div>
        <div key="key3">child3</div>
        {[
          <div key="key4">child4</div>,
          <div key="key5">child5</div>,
          <div key="key6">child6</div>,
        ]}*/}

        {/** case2*/}
        {/*<span>A</span><span>B</span>*/}

        {[<span>A</span>,<span key="keyB">B</span>]}
        {[<span>C</span>,<span key="keyD">D</span>]}
      </Child>
    )
  }

/*<Child>
{[<span>A</span>,<span key="keyB">B</span>]}
{[<span>C</span>,<span key="keyD">D</span>]}
</Child>*/
// 上面的↑ 等价于↓
//   React.createElement(
//     Child,
//     null,
//     // child1
//     [/*#__PURE__*/React.createElement("span", null, "A"), /*#__PURE__*/React.createElement("span", {
//   key: "keyB"
// }, "B")],
//     // child2
//     [/*#__PURE__*/React.createElement("span", null, "C"), /*#__PURE__*/React.createElement("span", {
//   key: "keyD"
// }, "D")]
//   )
}
const element = <App />;
console.log(element);
ReactDOM.render(
  element
  , document.getElementById('root'));
